<template>
	<view>
		<view class="search-box">
			<u-search placeholder="请输入车号" v-model="keyword" @change="search" shape="round" :show-action="false"bg-color="#fff" ></u-search>
		</view>
		<view class="main">
			<view class="max-big-box" v-for="(item,index) in search()":key="index" >
				<view class="big-box">
					<view class="left-box">
						<view class="left-newline-a">车名：{{item.name}}</view>
						<view class="left-newline-b">车号：<span>{{item.trainNo}}</span></view>
						<view class="models right-newline-b">车型：<span>{{item.trainModel.name}}</span> </view>
					</view>
					<view class="right-box">
						<!-- <view class="right-newline-a"><u-icon name="clock"></u-icon><span class="time">{{item.carTime}}</span></view> -->
						
						<view class="left-newline-c">转向架型号：<span>{{item.carBogie.name}}</span></view>
						<!-- <span>状态：</span><span>{{item.state}}</span> -->
						<!-- <view>状态：<span>油漆完工</span></view> -->
						<view class="code right-newline-c">转向架编码：<span>J{{item.stockCarBogie.code}}</span></view>
					</view>
				</view>
				<view class="bottom-box" @click="jump(item,index)">
					<view><span>解绑</span></view>
				</view>
			</view>
			<view v-if="this.allListItem==true" class="ending">
				没有更多数据了
			</view>
		</view>
	</view>
</template>

<script>
	import { ProcessBodyDropOffApi } from "../pages/drop/api/index.js"
	export default {
		name:"unbundling",
		data() {
			return {
				keyword:'',//搜索框的值
				dataList:[
				
				],//存放数据
				flag:false,
				total:'',//总数
				pageNum:0,//页数
				pageSize:10,//个数
				allListItem:false,//控制加载是否完成
			};
		},
		created() {
			// console.log(this.pushtwo);
			// console.log(ProcessBodyDropOffApi);
			let params = {
				 state: '1',
				 category: 'CAR_BOGIE',
				 sort: 'id,desc',
				 page:0,
				 size:10
			}
			ProcessBodyDropOffApi.bogieUnbindList(params).then(res=>{
				console.log(res);
				console.log(params);
				this.dataList=res.data.content
				this.total=res.data.totalElements
				// console.log(this.total);
			})
		},
		mounted() {
			uni.$on('onReachBottoma',()=>{
				// console.log(data);
				// console.log(123123);
					
					
				var allTotal = (this.pageNum+1) * this.pageSize
				console.log(allTotal);
				console.log(this.total);
				if(allTotal < this.total) {
					this.allListItem =  false;
					this.pageNum ++;
					// console.log(this.pageNum);
					this.getMoreList()
					console.log(this.dataList);
				} else {
					this.allListItem = true;
					console.log('已加载全部数据')
				}
				
			})
		},
		methods:{
			//下拉加载数据
			getMoreList(){
				let params = {
					 state: '1',
					 category: 'CAR_BOGIE',
					 sort: 'id,desc',
					 page:this.pageNum,
					 size:10
				}
				ProcessBodyDropOffApi.bogieUnbindList(params).then(res=>{
					console.log(res);
					console.log(params);
					res.data.content.forEach((item,index)=>{
						this.dataList.push(item)
					})
				})
			},
			
			search(){
				// console.log(11);
				   return  this.dataList.filter(item => item.trainNo.includes(this.keyword))
			},
			jump(e,index){
				console.log(e);
				// console.log(this.dataList);
				// console.log(this.dataList.splice(index,1));
				// this.dataList.splice(index,1)
				uni.showModal({
					title: '提示',
					content: '确认要解绑吗',
					success: function (res) {
						// var that =this
						if (res.confirm) {
						console.log(e.id);
						// console.log(index);
						this.dataList.splice(index,1)
						ProcessBodyDropOffApi.bogieUnbindSave({id:e.id}).then(res=>{
							uni.showToast({
								title:"操作成功"
							})
							
						}).catch(()=>{
							
						})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}.bind(this)
				});
			},
		},
	}
</script>

<style lang="scss" scoped> 
.search-box {
		height: 100rpx;
		padding: 0rpx 20rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #ddd;
		background-color: #efefef;
	}
	.main {
		padding: 16rpx 20rpx;
		// height: calc(100vh - 300rpx);
		height: calc(100vh - 290rpx);
		overflow: scroll;
		background-color: #efefef;
	}
.max-big-box {
	// width: 100%;
	// height: 280rpx;
	background-color: #fff;
	border-radius: 10px;
	margin-top: 20rpx;
}
.big-box {
	// width: 100%;
	// height: 200rpx;
	display: flex;
	justify-content: space-between;
	padding: 20rpx 20rpx;
	// margin-left: ;
	font-size: 30rpx;
    color: #999999;
}
.left-box>view:nth-of-type(2) {
	margin-top: 20rpx;
	margin-bottom: 10rpx;
}
.right-box>view:nth-of-type(2) {
	margin-top: 20rpx;
	margin-bottom: 10rpx;
	
}
.bottom-box {
	// width: 100%;
	// height: 90rpx;
	text-align: center;
	line-height: 80rpx;
	font-size: 30rpx;
    color: #0079FE;
	border-top: 1px solid #ddd;
}
// .models>span:nth-of-type(2) {
// 	margin-left: 40rpx;
// }
// .code {
// 	margin-top: 10rpx;
// 	margin-left: -40rpx;
// }

// .left-newline-a {
// 	width: 292rpx;
// }
// .left-newline-b{
// 	width: 280rpx;
// }
// .left-newline-c{
// 	width: 292rpx;
// }
// .right-newline-a {
// 	width: 324rpx;
// }
// // .right-newline-b {
// // 	width: 414rpx;
// // }
.ending {
		font-size: 34rpx;
		text-align: center;
		color: #dedede;
	}
.right-newline-c {
	width: 364rpx;
}
</style>
